<template>
  <input
          :id="id"
          ref="input"
          v-model="currentValue"
          :type="type"
          :autocomplete="autocomplete"
          :autofocus="autofocus"
          :disabled="disabled"
          :max="max"
          :maxlength="maxlength"
          :min="min"
          :minlength="minlength"
          :multiple="multiple"
          :name="name"
          :pattern="pattern"
          :placeholder="placeholder"
          :readonly="readonly"
          :required="required"
          class="baseClass"
          @blur="onBlur"
          @focus="onFocus"
          @keyup="$emit('keyup', $event)"
          @keydown="$emit('keydown', $event)"
  >
</template>

<script>
  import selfInstall from '../utils/selfInstall.js'
  import handleClasses from '../mixins/handleClasses.js'
  import commonAttributes from '../mixins/commonAttributes.js'
  import htmlInputMethods from '../mixins/htmlInputMethods.js'
  import TInputTheme from '../themes/default/TInput'

  const {
    baseClass,
    defaultStatusClass,
    errorStatusClass,
    successStatusClass,
    warningStatusClass,
    disabledClass,
    defaultSizeClass,
    largeSizeClass,
    smallSizeClass,
  } = TInputTheme

  export default {
    name: 'TInput',

    install(Vue, theme) {
      selfInstall(Vue, theme, this)
    },

    mixins: [commonAttributes, handleClasses, htmlInputMethods],

    props: {
      value: {
        type: [String, Number],
        default: null
      },
      reset: {
        type: Boolean,
        default: false
      },
      required: {
        type: Boolean,
        default: false
      },
      autocomplete: {
        type: String,
        default: null
      },
      max: {
        type: [String, Number],
        default: null
      },
      maxlength: {
        type: [String, Number],
        default: null
      },
      min: {
        type: [String, Number],
        default: null
      },
      minlength: {
        type: [String, Number],
        default: null
      },
      multiple: {
        type: Boolean,
        default: false
      },
      readonly: {
        type: Boolean,
        default: undefined
      },
      pattern: {
        type: String,
        default: null
      },
      placeholder: {
        type: String,
        default: null
      },
      type: {
        type: String,
        default: 'text'
      },
      baseClass: {
        type: [String, Object, Array],
        default: baseClass
      },
      defaultStatusClass: {
        type: [String, Object, Array],
        default: defaultStatusClass
      },
      errorStatusClass: {
        type: [String, Object, Array],
        default: errorStatusClass
      },
      successStatusClass: {
        type: [String, Object, Array],
        default: successStatusClass
      },
      warningStatusClass: {
        type: [String, Object, Array],
        default: warningStatusClass
      },
      disabledClass: {
        type: [String, Object, Array],
        default: disabledClass
      },
      defaultSizeClass: {
        type: [String, Object, Array],
        default: defaultSizeClass
      },
      largeSizeClass: {
        type: [String, Object, Array],
        default: largeSizeClass
      },
      smallSizeClass: {
        type: [String, Object, Array],
        default: smallSizeClass
      },
    },

    data () {
      return {
        currentValue: this.value,
        valueWhenFocus: null
      }
    },

    watch: {
      value (value) {
        this.currentValue = value
      },

      currentValue (currentValue) {
        this.$emit('input', currentValue)
      }
    },

    methods: {
      onBlur (e) {
        this.$emit('blur', e)
        if (this.currentValue !== this.valueWhenFocus) {
          this.$emit('change', this.currentValue)
        }
      },

      onFocus (e) {
        this.$emit('focus', e)
        this.valueWhenFocus = this.currentValue
      }
    },
  }
</script>

<style lang="stylus" >
  .baseClass
    @apply p-2 text-sm w-full bg-purple-4 shadow-border block rounded transition-shadow duration-150 bg-purple-4 ease-in-out
    &:hover
      @apply shadow-borderDark
    &:focus
      @apply outline-none shadow-focus

</style>
